<template>
	<view class="base-form">
		<u-form
			:labelWidth="labelWidth || '165rpx'"
			:model="form"
			:rules="rules"
			:errorType="errorType"
			ref="uForm"
		>
			<template v-for="(item,index) in formColumn" >
				
				<template v-if="item.type === 'slot'">
					<slot :name="item.key || 'default'"></slot>
				</template>
				
				<template v-if="item.type=='text'">
					<view class="form-cell">
						<u-form-item
							:required="item.required"
							:key="index"
							:label="item.label"
							:prop="item.key"
						>
							<u--input
								v-model="form[item.key]" inputAlign="right"
								:placeholder="item.placeholder || '请输入'+item.label "
								:disabled = "item.disabled"
								disabledColor="#ffffff"
								border="none"
								@change="handleChange($event,item.key)"
							></u--input>
							<view slot="right" style="display: flex;">
								<span style="color: #ccc;padding: 4rpx;line-height: 26px;margin-right: 6rpx;">{{item.unit}}</span>
								<view v-if="item.slot" style="padding: 4rpx;line-height: 26px;">
									<slot :name="item.slot || 'text'" ></slot>
								</view>
							</view>		
						</u-form-item>
					</view>
				</template>
				
				<template v-if="item.type=='textarea'">
					<view class="form-cell">
						<u-form-item
							:required="item.required"
							:key="index"
							:label="item.label"
							:prop="item.key"
						>
							<u--textarea
								v-model="form[item.key]"  inputAlign="right"
								:placeholder="item.placeholder || '请输入'+item.label " 
								count :maxlength="item.max || 140"></u--textarea>
						</u-form-item>
					</view>
				</template>
		
				<template v-if="item.type=='select'">
					<view class="form-cell">
						<base-form-picker
							:item="item"
							v-model="form[item.key]"
							@change="handleChange($event,item.key)"
						/>
					</view>
				</template>
				
				<template v-if="item.type=='date'">
					<view class="form-cell">
						<base-form-datePicker
							:item="item"
							v-model="form[item.key]"
							@change="handleChange($event,item.key)"
						/>
					</view>
				</template>
				
				<template v-if="item.type=='upload'">
					<view class="form-cell">
						<u-form-item
						:required="item.required"
						:label="item.label"
						:prop="item.key"
						borderBottom>
							<base-upload v-model="form[item.key]" @change="handleChange($event,item.key)"/>
						</u-form-item>
					</view>
				</template>
			</template>
		</u-form>
	</view>
</template>

<script>
	export default {
		name:"base-form",
		props: {
			formColumn:{ 
				type:Array,
				default:[],
				required: true
			},
			rules:{ 
				type: [Object, Function, Array],
				
			},
			value:{ 
				type:Object,
				required: true
			},
			labelWidth:{
				type:String,
			},
			errorType:{
				type:String,
				default:'message',
			}
		},
		model: {
			prop: 'value', // 默认是value
			event: 'input', // 默认是input
		},
		data() {
			return {
				form:this.value,
				
			};
		},
		watch: {
			'form': {
				deep: true,
				immediate: true,
				handler(newVal, oldVal) {
					this.valueChange(newVal);
				},
			},
		},
		created() {
			// console.log(this.formColumn)
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			setRules(rules) {
				this.rules = rules
				this.$refs.uForm.setRules(this.rules)
			},
			setFormColumn(rules) {
				this.formColumn = formColumn
			},
			valueChange(newVal) {
				const value = newVal;
				this.$nextTick(() => {
					this.$emit("input", value);
				});
			},
			handleChange($event,item){
				this.$refs.uForm.validateField(item)
			},
			async validate(){
				try{
					const res = await this.$refs.uForm.validate()
					console.log('validate',res)
					return true
				}catch(e){
					uni.$u.toast(e[0].message)
					return false
				}
			}
			

		}
	}
</script>

<style lang="less" scoped>
.base-form{
	// margin: 60rpx;
	background-color: #fff;
	.form-cell{
		padding-left: 40rpx;
		padding-right: 40rpx;
		padding-top: 8rpx;
		padding-bottom: 8rpx;
		border-bottom: 1px solid #d6d7d9;
		// &:last-child{
		// 	border-bottom: 0px;
		// }
	}
}
</style>
